<template>
  <div>
    <div>
      <!-- <van-grid :column-num="1">
      <van-grid-item
        v-for="value in 6"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid> -->

      <div class="template">
        <div class="tem_img" v-for="(v, k) in data" :key="k">
          <img :src="v.scene_pic_url" alt="" />
          <div class="tem_content">
            <p class="p1">{{ v.title }}</p>
            <p class="p2">{{ v.subtitle }}</p>
            <p class="p3">¥ {{ v.price_info.toFixed(2) }} 元起</p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="page">
        <van-pagination
          @change="fun"
          v-model="currentPage"
          :page-count="2"
          :show-page-size="0"
        />
      </div>
    </div>
    <!-- 底部导航 -->
    <apptabbar />
  </div>
</template>

<script>
import apptabbar from "@/components/AppTabbar";
// 请求专题商品数据
import { GetTemplateList } from "@/request/api";

export default {
  data() {
    return {
      currentPage: 1, //默认显示第一页
      data: [],
    };
  },
  components: {
    apptabbar,
  },
  methods: {
    fun() {
      // 点击第二页跳到头部
      document.body.scrollTop = document.documentElement.scrollTop = 0;

      GetTemplateList({ page: this.currentPage }).then((res) => {
        console.log(res);
        let { data } = res.data;
        this.data = data;
      });
    },
  },
  created() {
    GetTemplateList().then((res) => {
      let { data } = res.data;
      this.data = data;
    });
  },
};
</script>

<style lang="less">
.template {
  .tem_img {
    background-color: #fff;
    width: 100%;
  }
  img {
    height: 3.75rem;
    width: 3.75rem;
  }
  .tem_content {
    text-align: center;
    .p1 {
      padding-top: 0.1rem;
      font-size: 0.18rem;
      font-weight: 500;
    }
    .p2 {
      font-size: 0.16rem;
      padding: 0.15rem 0.1rem 0.15rem 0.1rem;
      //超出部分用省略号代替
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .p3 {
      color: #8b0000;
      font-size: 0.14rem;
      padding-bottom: 0.1rem;
    }
  }
}
.page {
  padding-top: 0.3rem;
  padding-bottom: 1rem;
  .van-pagination__item {
    color: #8b0000;
  }
}
</style>